import React, { useState } from "react";
import style from "../list/index.module.css";
import { NavBar, Space, Toast } from "antd-mobile";
import { useLocation, useNavigate } from "react-router-dom";
import { Popup, Button, List, Card, Tag } from "antd-mobile";
import { Selector } from "antd-mobile";
import { Steps } from "antd-mobile";
import { Collapse } from "antd-mobile";
import { Input } from 'antd-mobile'
const { Step } = Steps;
import { CloseCircleOutline } from "antd-mobile-icons";
import dayjs from "dayjs";
function Index() {
  const navigate = useNavigate();
  const back = () => navigate("/index");
  const [value, setValue] = useState('')
  const { state } = useLocation();
  const [visible1, setVisible1] = useState(false);
  const [date] = useState(dayjs().format("YYYY-MM-DD"));
  const options = [
    {
      label: "有票方案",
      value: "1",
    },
    {
      label: "二等座",
      value: "2",
    },
    {
      label: "一等座",
      value: "3",
    },
    {
      label: "商务座",
      value: "4",
    },
  ];
  const goOrder=()=>{
    navigate(`/order`,{state:state})
  }
  return (
    <div>
      <NavBar onBack={back}>{date}</NavBar>

      <div className={style.plane}>
        <span style={{ fontSize: 20 }}>{state.ast}</span>
        <span>{state.aat}</span>
        <span style={{ fontSize: 20 }}>{state.dst}</span>

        <span>{state.aasn}</span>
        <span onClick={() => setVisible1(true)}>时刻表</span>
        <span>{state.sc}</span>

        <span></span>
        <span>购票须知</span>
        <span></span>
      </div>

      <Selector columns={4} options={options} defaultValue={["1"]} multiple />

      <Collapse
        accordion
        arrowIcon={(action) => (action ? <Tag>收起</Tag> : <Tag>展开</Tag>)}
      >
        <Collapse.Panel key="5" title="二等票已售尽，为您找到以下有票方案">
          <div className={style.huan}>
            <span>上车:{state.ast}</span>
            <span>——</span>
            <span>二等座</span>
            <span>——</span>
            <span>{state.dst}</span>
            <span>.....</span>
            <span>补4站</span>
            <span>-</span>
            <span>下车:{state.sc}</span>
          </div>
          <span>买北京到苏州东的车票，上车后补票到上海虹桥</span>
        </Collapse.Panel>
      </Collapse>

      <Collapse accordion>
        <Collapse.Panel
          key="1"
          title={
            <span style={{ fontSize: 20, color: "#d77e26f1" }}>
              ￥{state.timespanNumber}
            </span>
          }
        >
          <list>
            <List.Item
              extra={<Button color="warning" onClick={()=>goOrder()}>订</Button>}
              description={<Card>免费退票补偿</Card>}
            >
              <span>出行无忧礼包</span>
            </List.Item>
          </list>
        </Collapse.Panel>

        <Collapse.Panel
          key="2"
          title={
            <span style={{ fontSize: 20, color: "#d77e26f1" }}>
              ￥{state.timespanNumber}
            </span>
          }
        >
          <list>
            <List.Item
              extra={<Button color="warning" onClick={()=>goOrder()}>订</Button>}
              description={<Card>免费退票补偿</Card>}
            >
              <span>出行无忧礼包</span>
            </List.Item>
          </list>
        </Collapse.Panel>

        <Collapse.Panel
          key="3"
          title={
            <span style={{ fontSize: 20, color: "#d77e26f1" }}>
              ￥{state.timespanNumber}
            </span>
          }
        >
          <list>
            <List.Item
              extra={<Button color="warning" onClick={()=>goOrder()}>订</Button>}
              description={<Card>免费退票补偿</Card>}
            >
              <span>出行无忧礼包</span>
            </List.Item>
          </list>
        </Collapse.Panel>
      </Collapse>


          <div>
             <Input
             style={{height:'120px'}}
          placeholder='其他想说的(选项)'
          value={value}
          onChange={ val => {
            setValue(val) 
              console.log(val);
              
          }}
        />
         <Button block color='success' size='large'>
          提交
        </Button>
          </div>

          

      <Popup
        visible={visible1}
        onMaskClick={() => {
          setVisible1(false);
        }}
        onClose={() => {
          setVisible1(false);
        }}
        bodyStyle={{ height: "50vh" }}
      >
        {
          <div>
            <h2 style={{ textAlign: "center" }}>G101时刻表</h2>
            <span onClick={() => setVisible1(false)} className={style.icons}>
              <CloseCircleOutline />
            </span>
            <Steps direction="vertical">
              <Step
                title="北京南"
                status="finish"
                description="完成时间：2020-12-01 12:30"
              />
              <Step
                title="天津南"
                status="finish"
                description="完成时间：2020-12-01 12:30"
              />
              <Step
                title="德州东"
                status="finish"
                description="完成时间：2020-12-01 12:30"
              />
              <Step
                title="济南西"
                status="finish"
                description="完成时间：2020-12-01 12:30"
              />
              <Step
                title="曲阜东"
                status="finish"
                description="完成时间：2020-12-01 12:30"
              />
              <Step
                title="徐州东"
                status="finish"
                description="完成时间：2020-12-01 12:30"
              />
            </Steps>
          </div>
        }
      </Popup>
    </div>
  );
}

export default Index;
